<template>
  <div style="width: 100%;height: 100vh; background: linear-gradient(90deg,#3cadeb,#9c88ff);display: flex;justify-content: center;align-items: center">
    <div style="width: 300px; height: 380px;box-shadow: 0 5px 15px rgba(0, 0, 0, .8); display: flex;justify-content: center;align-items: center;">
      <el-form ref="form" :model="form" style="height: 100% ;width: 220px;" :rules="rules">
        <div style="width: 100%;height: 40px;margin-top:10px;line-height: 40px;text-align: center">
          <span style="color: white;font-weight: 900;font-size: 30px;">Login</span>
        </div>
            <el-form-item style="margin-top: 50px" prop="username">
            <el-input v-model="form.name"  prefix-icon="el-icon-user-solid" placeholder="请输入用户名"></el-input>
          </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="form.password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="color: white; border-radius: 30px;width: 100%;height: 50px;background: linear-gradient(90deg,#3cadeb,#9c88ff);" @click="onSubmit">登陆</el-button>
          </el-form-item>
        <el-form-item style="text-align: center; color: white;">
          <a @click="toRegister" style="font-size: 16px;font-weight: 500;opacity: 0.8;text-decoration: underline">注册</a>
        </el-form-item>
    </el-form>
    </div>
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login' ,
  data() {
    return {
      form: {
        name: "",
        password: ""
      }
    };
  },
  methods:{
    onSubmit() {
      const name = this.form.name;
      const password = this.form.password;
      if (name != ""  && password != "" ){
        this.$http.get('/user/login/'+name+'/'+password)
                .then((response)=>{
                  if (response.data.length >0){
                    this.$router.push({ path: "/Home" });
                    sessionStorage.setItem("user", name);
                    console.log(response)
                  }else {
                    this.$message.error('登陆失败,请检查用户名和密码填写是否正确');
                  }
                }).catch(reason => {
                  console.log(reason)
        })
      }else{
        this.$message.error('登陆失败,请检查用户名和密码填写是否正确');
      }
    },
    toRegister(){
      this.$router.push({ path: "/register" });
    }

  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
